<template>
	<view class="disclose-details">
		<navBar title="查看详情"  @goBack="uni.navigateBack()"></navBar>
		
		<template v-if="fillRecordDetails">
			<view class="title">每日班前交底</view>
			<view class="card">
				<view class="inline-item">
					<view class="label">项目名称</view>
					<view class="label-content">{{fillRecordDetails.pbName}}</view>
				</view>
				
				<view class="inline-item">
					<view class="label">区间/站点</view>
					<view class="label-content">{{fillRecordDetails.lineSiteSectionList.map(item => item.lineSiteSectionName).join(",")}}</view>
				</view>
				
				<view class="inline-item">
					<view class="label">安全监管人员</view>
					<view class="label-content">{{fillRecordDetails.personnelCallList.map(item => item.personName).join("、")}}</view>
				</view>
				
				<view class="inline-item" style="border: none; border-bottom: 8upx;">
					<view class="label">旁站照片</view>
				</view>
				<view class="image-list">
					<image @click.stop="previewImage(fillRecordDetails.sidePhotoFileArray, index)" v-for="(item, index) in fillRecordDetails.sidePhotoFileArray" :key="index" :src="item.url" mode="aspectFill"></image>
				</view>
				
				<view class="inline-item" style="margin-top: 0;">
					<view class="label">劳务人员</view>
					<view class="label-content">{{fillRecordDetails.labourServicePerson ? fillRecordDetails.labourServicePerson : 0}}人</view>
				</view>
			</view>
				
			<view class="card" style="margin-top: 40upx; padding-bottom: 14upx;">
				<view class="inline-item" style="border: none; border-bottom: 8upx;">
					<view class="label">每日班前交底（签字文件）</view>
				</view>
				<view class="image-list">
					<image @click.stop="previewImage(fillRecordDetails.signatureFileArray, index)" v-for="(item, index) in fillRecordDetails.signatureFileArray" :key="index" :src="item.url" mode="aspectFill"></image>
				</view>
				
				<view class="inline-item" style="border: none; border-bottom: 8upx; margin-top: 16upx;">
					<view class="label">每日班前交底（现场照片）</view>
				</view>
				<view class="image-list">
					<image @click.stop="previewImage(fillRecordDetails.localeFileArray, index)" v-for="(item, index) in fillRecordDetails.localeFileArray" :key="index" :src="item.url" mode="aspectFill"></image>
				</view>
			</view>
			
			<view class="card" style="margin-top: 40upx; padding-bottom: 12upx;">
				<view class="inline-item">
					<view class="label">特殊工种人员</view>
					<view class="label-content">{{fillRecordDetails.personnelCallList1.map(item => item.personName).join("、")}}</view>
				</view>
				
				<view class="inline-item">
					<view class="label">作业许可</view>
					<view class="label-content">{{fillRecordDetails.workPermit === "y" ? "有" : "无"}}</view>
				</view>
				
				<view v-for="(item, index) in fillRecordDetails.workPermitList" :key="index">
					<view class="image-list" style="margin-top: 14upx;">
						<image @click.stop="previewImage(item.fileArray, index1)" v-for="(item1, index1) in item.fileArray" :key="index1" :src="item1.url" mode="aspectFill" style="margin-bottom: 20upx;"></image>
					</view>
					<view style="line-height: 34upx; margin-left: 46upx; font-size: 24upx; padding-bottom: 24upx; color: #445469;">{{item.workPermitName}}</view>
				</view>
			</view>
				
			<view class="card" style="margin-top: 40upx; padding-bottom: 12upx;">
				<view class="inline-item">
					<view class="label">安全设施</view>
					<view class="label-content">{{fillRecordDetails.safetyPractice === "y" ? "有" : "无"}}</view>
				</view>
				
				<view class="inline-item">
					<view class="label">施工结束时间</view>
					<view class="label-content">{{fillRecordDetails.endConstructionDate}}</view>
				</view>
			</view>
			
			<template v-if="!fillRecordDetails.isSecurityStatus">
				<view class="title">现场照片</view>
				<view v-if="fillRecordDetails.hoistingFileArray.length" class="card" style="padding-bottom: 6upx;">
					<view class="inline-item" style="border: none;">
						<view class="label">起重吊装作业照片</view>
					</view>
					<view class="image-list">
						<image @click.stop="previewImage(fillRecordDetails.hoistingFileArray, index)" v-for="(item, index) in fillRecordDetails.hoistingFileArray" :key="index" :src="item.url" mode="aspectFill"></image>
					</view>
				</view>
				
				<view v-if="fillRecordDetails.flameOperationFileArray.length" class="card" style="margin-top: 40upx; padding-bottom: 16upx;">
					<view class="inline-item" style="border: none;">
						<view class="label">动火作业照片</view>
					</view>
					<view class="image-list">
						<image @click.stop="previewImage(fillRecordDetails.flameOperationFileArray, index)" v-for="(item, index) in fillRecordDetails.flameOperationFileArray" :key="index" :src="item.url" mode="aspectFill"></image>
					</view>
				</view>
				
				<view v-if="fillRecordDetails.confinedSpaceFileArray.length" class="card" style="margin-top: 40upx; padding-bottom: 16upx;">
					<view class="inline-item" style="border: none;">
						<view class="label">有限空间作业照片</view>
					</view>
					<view class="image-list">
						<image @click.stop="previewImage(fillRecordDetails.confinedSpaceFileArray, index)" v-for="(item, index) in fillRecordDetails.confinedSpaceFileArray" :key="index" :src="item.url" mode="aspectFill"></image>
					</view>
				</view>
				<view v-if="fillRecordDetails.dangerFileArray.length" class="card" style="margin-top: 40upx; padding-bottom: 16upx;">
					<view class="inline-item" style="border: none;">
						<view class="label">危险作业照片</view>
					</view>
					<view class="image-list">
						<image @click.stop="previewImage(fillRecordDetails.dangerFileArray, index)" v-for="(item, index) in fillRecordDetails.dangerFileArray" :key="index" :src="item.url" mode="aspectFill"></image>
					</view>
				</view>
				
				<view v-if="fillRecordDetails.climbingFileArray.length" class="card" style="margin-top: 40upx; padding-bottom: 16upx;">
					<view class="inline-item" style="border: none;">
						<view class="label">登高作业照片</view>
					</view>
					<view class="image-list">
						<image @click.stop="previewImage(fillRecordDetails.climbingFileArray, index)" v-for="(item, index) in fillRecordDetails.climbingFileArray" :key="index" :src="item.url" mode="aspectFill"></image>
					</view>
				</view>
	
				<view v-if="fillRecordDetails.eligibilityCriteriaFileArray.length" class="card" style="margin-top: 40upx; padding-bottom: 16upx;">
					<view class="inline-item" style="border: none;">
						<view class="label">安全设施验收合格标识牌</view>
					</view>
					<view class="image-list">
						<image @click.stop="previewImage(fillRecordDetails.eligibilityCriteriaFileArray, index)" v-for="(item, index) in fillRecordDetails.eligibilityCriteriaFileArray" :key="index" :src="item.url" mode="aspectFill"></image>
					</view>
				</view>
	
				<view v-if="fillRecordDetails.inspectionRecordFileArray.length" class="card" style="margin-top: 40upx; padding-bottom: 16upx;">
					<view class="inline-item" style="border: none;">
						<view class="label">安全设施搭设验收记录表</view>
					</view>
					<view class="image-list">
						<image @click.stop="previewImage(fillRecordDetails.inspectionRecordFileArray, index)" v-for="(item, index) in fillRecordDetails.inspectionRecordFileArray" :key="index" :src="item.url" mode="aspectFill"></image>
					</view>
				</view>
				
				<view v-if="fillRecordDetails.otherFileArray.length" class="card" style="margin-top: 40upx; padding-bottom: 16upx;">
					<view class="inline-item" style="border: none;">
						<view class="label">其他</view>
					</view>
					<view class="image-list">
						<image @click.stop="previewImage(fillRecordDetails.otherFileArray, index)" v-for="(item, index) in fillRecordDetails.otherFileArray" :key="index" :src="item.url" mode="aspectFill"></image>
					</view>
				</view>
			</template>
		</template>
	</view>
</template>

<script>
 	import { mapGetters } from "vuex";
	import fileMixin from "@/mixins/file.js";
	import { handleFormatDate } from "@/utils/date.js";
	
	export default {
		mixins: [fileMixin],
		data() {
			return {
				// 填报记录详情
				fillRecordDetails: null,
			}
		},
		computed: {
			...mapGetters(['dictMap'])
		},
		created() {
			this.getFillRecordDetails();
		},
		methods: {
			/** 预览图片 */
			previewImage(imgArray, index) {
				uni.previewImage({ current: index, urls: imgArray.map(item => item.url) });
			},
			
			/** 获取填报记录详情数据 */
			async getFillRecordDetails() {
				if(uni.getStorageSync("_temp_fill_record_details")) {
					const data = uni.getStorageSync("_temp_fill_record_details");
					
					let workPermitList = [];
					if(data.workPermit === "y") {
						for(const item of data.workPermitList) {
							workPermitList.push({
								...item,
								fileArray: await this.getFileListByDocId(item.docId),
								workPermitName: this.dictMap['work_permit_name'] && this.dictMap['work_permit_name'].find(item1 => item1.code === item.workPermitName).name,
							});
						}
					}
					
					this.fillRecordDetails = {
						...data,
						sidePhotoFileArray: await this.getFileListByDocId(data.sidePhotoDoc),
						signatureFileArray: await this.getFileListByDocId(data.signatureFileDoc),
						localeFileArray: await this.getFileListByDocId(data.localeDoc),
						endConstructionDate: data.endConstructionDate ? handleFormatDate(data.endConstructionDate, 3) : "",
						workPermitList,
						hoistingFileArray: await this.getFileListByDocId(data.hoistingDoc),
						flameOperationFileArray: await this.getFileListByDocId(data.flameOperationDoc),
						confinedSpaceFileArray: await this.getFileListByDocId(data.confinedSpaceDoc),
						dangerFileArray: await this.getFileListByDocId(data.riskJobDoc),
						climbingFileArray: await this.getFileListByDocId(data.climbingDoc),
						eligibilityCriteriaFileArray: await this.getFileListByDocId(data.eligibilityCriteriaDoc),
						inspectionRecordFileArray: await this.getFileListByDocId(data.inspectionRecordDoc),
						otherFileArray: await this.getFileListByDocId(data.otherDoc),
					}
					uni.removeStorageSync("_temp_fill_record_details");
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.disclose-details {
		min-height: 100vh;
		background: #f5f7fa;
		font-size: 32upx;
		/* #ifdef MP-WEIXIN */
			padding-top: 200rpx;
		/* #endif */
		
		.title {
			font-size: 36upx;
			color: #22204e;
			font-weight: 800;
			padding: 38upx 30upx 12upx;
			line-height: 50upx;
		}
		
		.card {
			background: #fff;
			padding: 10upx 32upx 0 28upx;
			font-weight: bold;
			
			.inline-item {
				height: 100upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #e2e5ed;
				margin-bottom: 10upx;
				
				&:last-of-type {
					border-bottom: none;
					margin-bottom: 0;
				}
				
				.label {
					color: #445469;
					flex-shrink: 0;
				}
				
				.label-content {
					max-width: 330upx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					padding-right: 4upx;
				}
			}
		}
	}
	
	.image-list {
		display: flex;
		flex-wrap: wrap;
		
		image {
			width: 204upx;
			height: 204upx;
			margin-right: 24upx;
			margin-bottom: 24upx;
		}
	}
</style>
